<template>
    <div class="container_search">
        <div class="search">
            <input type="text" v-model="input" :id="search_id">
            <button @click="send">搜索</button>
        </div>
        <div class="btn_list">
            <button @click="showMakers">显示标记点</button>
            <button @click="removeMakers">移除标记点</button>
            <button @click="showPolyLine">显示路径</button>
            <button @click="removePolyLine">移除路径</button>
            <button @click="fixBounds">修改地图边界</button>
            <button @click="destroyMap">销毁地图</button> 
        </div>
        <div class="btn_list">
            <button @click="showAnimationLine">显示轨迹</button>
            <button @click="startAnimation">开始动画</button>
            <button @click="pauseMove">暂停动画</button>
            <button @click="resumeMove">继续动画</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Search',
    data() {
        return {
            search_id: 'searchId',
            input: ''
        }
    },
    methods: {
        send() {
            this.$bus.$emit('getSearchInfo', this.search_id)
        },
        showMakers() {
            this.$bus.$emit('makersShow')
        },
        showPolyLine() {
            this.$bus.$emit('polyLineShow')
        },
        removeMakers(){
            this.$bus.$emit('makersRemove')
        },
        removePolyLine(){
            this.$bus.$emit('polyLineRemove')
        },
        fixBounds(){
            this.$bus.$emit('boundsFix')
        },
        destroyMap(){
            this.$bus.$emit('mapDestroy')
        },
        showAnimationLine(){
            this.$bus.$emit('animationLineShow')
        },
        startAnimation(){
            this.$bus.$emit('animationStart')
        },
        pauseMove(){
            this.$bus.$emit('movePause')
        },
        resumeMove(){
            this.$bus.$emit('moveResume')
        }
    },
    mounted() {
        this.send();
    }
}
</script>

<style scoped>
.container_search {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px;
}

.search {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn_list {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

button {
    min-width: 60px;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    border-radius: 6px;
    border: none;
    background-color: #3366cc;
    color: white;
    font-size: 10px;
    outline: none;
}

input {
    width: 200px;
    height: 40px;
    border-radius: 6px;
    outline: none;
    border: 1px solid #a2a2a3;
}</style>